import React from 'react'
import { NavBar,Button,
  Checkbox,
  Field,
  Radio,
  Rate,
  Slider,
  Stepper,
  Switch,
  Uploader,
  Form, } from 'react-vant';
  import {useDispatch,useSelector} from 'react-redux'
import * as api from '../api/index'
import withRouter from '../utile/withRouter'


function Add({router}) {
  const dispatch=useDispatch()
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log(values);
    let obj ={
      id:new Date()*1,
      detail:values.address,
      title:values.textarea,
      name:values.username,
      phone:values.phone,
    }
    //重新发送到仓库数据
    dispatch(api.add_address(obj))
 
    router.navigate('/detailList')
  };

  const data=useSelector(state =>{
    return state.reducer.detailData;
    
  })
  console.log(data)
  return (
    <div>
       <NavBar title='添加地址'  onClickLeft={() => router.navigate('/detailList')}></NavBar>
       <Form
      colon
      border={false}
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType="submit" type="primary" block>
            提交
          </Button>
        </div>
      }
    >
      {/* 手机号 */}
      <Form.Item
        tooltip={{
          message:
            '',
        }}
        intro="确保这是唯一的用户名"
        rules={[{ required: true, message: '请填写用户名' }]}
        name="username"
        label="联系人"
      >
        <Field placeholder="请输入用户名" />
      </Form.Item>

      <Form.Item name="radio" label="单选框" initialValue="先生">
        <Radio.Group direction="horizontal">
          <Radio name="先生">先生</Radio>
          <Radio name="女士">女士</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        tooltip={{
          phone:
            '',
        }}
       
        rules={[{ required: true, phone: '请填写手机号' }]}
        name="phone"
        label="手机号"
      >
        <Field placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        tooltip={{
          address:
            '',
        }}
       
        rules={[{ required: true, address: '请填写收货地址' }]}
        name="address"
        label="收获地址"
      >
        <Field placeholder="收货地址" />
      </Form.Item>
      <Form.Item name="textarea" label="详细地址">
        <Field rows={3} autosize type="textarea" maxlength={140} showWordLimit />
      </Form.Item>
     
      
    </Form>
    </div>
  )
}

export default withRouter(Add)